<template>
  <div>
    <nav-header :headerTitle="'投诉'" :headerNext="''" :navBgColor="'#fff'"></nav-header>
    <section class="page">
      <div class="header">
        <div>请选择投诉原因</div>
      </div>
      <div class="section">
        <div class="items" v-for="(item,index) in show.arr" :key="item" @click="itemClick(index)">
          <div class="content">
            <span>{{item.name}}</span>
            <img v-if="item.isSelected" src="@/assets/images/mine_yes.png" alt />
          </div>
        </div>
      </div>
      <van-button :disabled="isDisabled" class="form-btn" type="default" @click="tap2Upload">提交</van-button>
    </section>
  </div>
</template>

<script>
import Vue from "vue";
import {Button } from "vant";
Vue.use(Button);
import navHeader from "@/components/NavHeader";
import mixin from "@/utils/mixin";
export default {
  name: "Complaint",
  mixins: [mixin],
  components: {
    navHeader
  },
  data() {
    return {
      isDisabled: true,
      selectedOption: "",
      selectedIndex: "",
      show: {
        porductId: "",
        arr: [
          { name: "欺诈", isSelected: false },
          { name: "色情", isSelected: false },
          { name: "诱导行为", isSelected: false },
          { name: "不实信息", isSelected: false },
          { name: "违法犯罪", isSelected: false },
          { name: "侵权", isSelected: false }
        ]
      }
    };
  },
  created() {
    this.show.productId = this.$route.query.id;
  },
  mounted() {},
  methods: {
    itemClick(index) {
      this.isDisabled = false;
      this.show.arr.forEach(element => {
        element.isSelected = false;
      });
      this.show.arr[index].isSelected = true;
      this.selectedIndex = index;
      this.selectedOption = this.show.arr[index].name;
    },
    tap2Upload() {
      this.isDisabled = true;
      if (this.selectedOption.legnth <= 0) {
        return false;
      }
      this.params = {
        tipOffSceneId: parseInt(this.$route.query.tipOffSceneId),
        uniqueId: window.localStorage.uniqueId,
        tipOffType: parseInt(this.selectedIndex),
        tipOffScene: parseInt(this.$route.query.tipOffScene)
      };
      this.$http.post("feedback/launchTipOff", this.params).then(
        res => {
          console.log(res);
          Toast({
            forbidClick: true,
            message: "你的投诉已提交，我们会尽快处理",
            onClose: () => {
              this.$router.go(-1);
            }
          });
        },
        err => {
          console.log(err);
        }
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  margin: 86px auto 160px;

  .null120 {
    width: 100%;
    height: 120px;
  }
  .header {
    padding-left: 32px;
    padding-right: 32px;
    div {
      width: 100%;
      height: 110px;
      line-height: 130px;
      text-align: left;
      font-size: 28px;
      font-family: PingFangSC-Regular;
      font-weight: bold;
      color: rgba(255, 37, 37, 1);
      border-bottom: 2px solid rgba(237, 237, 237, 1);
    }
  }
  .section {
    .items {
      padding-left: 32px;
      padding-right: 32px;
      .content {
        width: 100%;
        height: 126px;
        position: relative;
        border-bottom: 2px solid rgba(237, 237, 237, 1);
      }
      span {
        font-size: 34px;
        font-family: PingFangSC-Regular;
        color: rgba(48, 49, 51, 1);
        position: absolute;
        left: 0px;
        top: 40px;
      }
      img {
        width: 30px;
        position: absolute;
        right: 0px;
        top: 0;
        bottom: 0;
        margin: auto;
      }
    }
    .items:active {
      background: rgba(237, 237, 237, 1);
    }
  }
  .form-btn {
    width: 686px;
    height: 88px;
    background: rgba(255, 37, 37, 1);
    border-radius: 44px;
    font-size: 34px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 88px;
    position: fixed;
    bottom: 40px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 9;
  }
}
</style>
